<template>
  <div v-loading="loading" class="need-handle">
    <el-dialog v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.2)" :visible.sync="dialogShow" title="处理需求" :close-on-click-modal="false" @close="handleBack">
      <!-- <c-form-container :column="1" :bottom="false"> -->
      <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
        <el-row>
          <el-col :span="24">
            <el-form-item prop="result" label="需求提报结果:">
              <div>{{ formaterData(demandResultList, formData.demandReportResult) }}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>

          <el-col :span="12">
            <el-form-item prop="expectRequireGoodsTime" label="预计要货时间:" :rules="[{ required: formData.demandReportResult === 'NORMAL_OPER', message: '请选择预计要货时间' }]">
              <el-date-picker
                v-model="formData.expectRequireGoodsTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="datetime"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="demandReportTime" label="需求提报时间:" :rules="[{ required: formData.demandReportResult === 'NORMAL_OPER', message: '请选择需求提报时间' }]">
              <el-date-picker
                v-model="formData.demandReportTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                type="datetime"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="account" label="开单账号:" :rules="[{ required: formData.demandReportResult === 'NORMAL_OPER', message: '请选择开单账号' }]">
              <input-with-dialog
                v-model="formData.account"
                :props="{label:'code',value:'code'}"
                :multiple="false"
                :focus-query="true"
                :config="acccountConfig"
                @change="handleChangeAccount"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="账号名称:">
              <div>{{ formData.billerName }}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="serveCode" label="送达方编码:" :rules="[{ required: formData.demandReportResult === 'NORMAL_OPER', message: '请选择送达方账号' }]">
              <input-with-dialog
                v-model="formData.serve"
                :props="{label:'code',value:'code'}"
                :multiple="false"
                :disabled="!formData.billerCode"
                placeholder="请先选择开单账号"
                :focus-query="true"
                :config="serveCodeConfig"
                @change="handleChangeServeCode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="送达方名称:">
              <div>{{ formData.serveName }}</div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item prop="demandResult" label="处理结果:">
              <c-dict-select v-model="formData.demandResult" dict-type-code="REVIEW_RESULT" placeholder="处理结果" />
              <!-- <el-select v-model="formData.handleResult" placeholder="处理结果" clearable>
              <el-option label="同意" value="1" />
              <el-option label="不同意" value="0" />
            </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="demandAdvice" label="处理意见:">
              <el-input v-model="formData.demandAdvice" maxlength="1000" show-word-limit type="textarea" :autosize="{minRows:3}" placeholder="处理意见" clearable />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <!-- </c-form-container> -->
      <div slot="footer">
        <el-button size="mini" @click="handleBack">取消</el-button>
        <el-button type="primary" size="mini" @click="confirmHandle">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { changeConfigState, getProConfigEditData } from '@/api/proConfig'
import { getDictByPatchType } from '@/api/dataDict'
export default {
  name: 'NeedHandle',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      loading: false,
      formData: {
        result: '1',
        reason: '',
        handleResult: '',
        serveCode: '',
        serveName: '',
        billerCode: '',
        billerName: '',
        expectRequireGoodsTime: '',
        demandReportTime: '',
        account: [],
        serve: []
      },
      formRules: {
        demandResult: []
      },
      serveCodeConfig: {
        title: '送达方账号',
        interfacePath: '/select-service/api/v2/cusStore/page',
        apiHeader: { 'Permission-Code': 'Common.CusStore.page',
          'Permission-PerCode': 'decoration',
          'Permission-App': 'slm' },
        setting: [
          {
            prop: 'code',
            title: '账号'
          },
          {
            prop: 'name',
            title: '姓名'
          }
        ]
      },
      acccountConfig: {
        title: '开单账号',
        interfacePath: '/select-service/api/v1/account/page',
        apiHeader: { 'permission-code': 'decoration', 'Permission-App': 'slm' },
        setting: [
          {
            prop: 'code',
            title: '账号'
          },
          {
            prop: 'name',
            title: '姓名'
          }
        ]
      },
      demandResultList: []
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  async  created() {
    this.formData.id = this.detailData.id

    await getProConfigEditData(this.formData.id).then(res => {
      if (res.success && res.data) {
        this.formData = res.data
        this.$set(this.formData, 'account', [{ name: this.formData.billerName, code: this.formData.billerCode }])
        this.$set(this.formData, 'serve', [{ name: this.formData.serveName, code: this.formData.serveCode }])
      }
    })
    const filterRaw = [{ 'id': 'customerCode', 'property': 'customerCode', 'operator': '=', 'value': this.formData.clientCode },
      { 'id': 'status', 'property': 'status', 'operator': '=', 'value': '1' }]
    this.$set(this.acccountConfig, 'filtersRaw', filterRaw)
    this.$set(this.serveCodeConfig, 'filtersRaw', filterRaw)

    if (this.formData.billerCode) {
      this.$set(this.serveCodeConfig, 'filtersRaw', [...filterRaw, { 'id': 'accountCode', 'property': 'accountCode', 'operator': '=', 'value': this.formData.billerCode }])
    }
    this.getDictByPatchTypeAll(['DEMAND_RESULT'])
      .then(res => {
        this.demandResultList = res.DEMAND_RESULT
      })
  },
  methods: {
    // 选择开单账号
    handleChangeAccount(row) {
      if (row.length > 0) {
        this.$set(this.formData, 'billerCode', row[0].code)
        this.$set(this.formData, 'billerName', row[0].name)
        this.serveCodeConfig.filtersRaw = [{ id: 'accountCode', property: 'accountCode', operator: '=', value: row[0].code }]
      } else {
        this.$set(this.formData, 'billerCode', '')
        this.$set(this.formData, 'billerName', '')
      }
      this.$set(this.formData, 'serveCode', '')
      this.$set(this.formData, 'serveName', '')
      this.formData.serve = []
    },
    // 送达方账号
    handleChangeServeCode(row) {
      if (row.length > 0) {
        this.$set(this.formData, 'serveCode', row[0].code)
        this.$set(this.formData, 'serveName', row[0].name)
      } else {
        this.$set(this.formData, 'serveCode', '')
        this.$set(this.formData, 'serveName', '')
      }
    },
    async getDictByPatchTypeAll(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 格式化数据
    formaterData(arr, dictCode) {
      if (!arr) return
      const tmpArr = arr.filter(item => item.dictCode === dictCode)
      if (tmpArr.length) {
        return tmpArr[0].dictName
      }
      return dictCode
    },
    // 返回
    handleBack() {
      this.dialogShow = false
      this.clearForm()
      this.$emit('success')
    },
    clearForm(done) {
      this.formData = {
        constData: [],
        staff: []
      }
      this.$refs.rulesForm && this.$refs.rulesForm.clearValidate()
      done && done()
    },
    // 确认
    confirmHandle() {
      this.$refs.form.validate(validate => {
        if (validate) {
          this.loading = true
          changeConfigState(this.formData).then(res => {
            if (res.success) {
              this.$message.success('操作成功')
              this.dialogShow = false
              this.clearForm()
              this.$emit('success', false)
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.need-handle{
  display: inline-block;
  margin: 0 10px;
}
</style>
